<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>Canvas</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${base}/static/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/css/scrollBar.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="${base}/static/css/responsive.css"/>
    <link rel="stylesheet" href="${base}/svg/node_modules/jquery-ui/themes/base/all.css">
    <script src="${base}/static/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .img img {
            max-height: 85%;
            max-width: 100px;
        }
        #angle_title,#size_title {
            width: 60px;
        }
        .controls_slider {
            margin-right: 40px;
        }
    </style>
    <style type="text/css">
        @import "${base}/svg/newscript/svg/jquery.svg.css?vno=8";
        @import "${base}/svg/newscript/css/oldc.css?vno=8";

        .svgText {
            position: fixed;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100px;
        }

        select {
            height: 30px;
            width: 204px !important;
        }

        textarea {
            width: 200px !important;
            height: 50px;
        }

        input[type=text] {
            height: 26px;
            width: 200px !important;
        }

        .form-group {
            margin-bottom: 10px;
        }

        .form-group label {
            text-align: left;
            width: 100px;
            display: inline-block;
            vertical-align: center;
        }

        .pagination {
            display: inline-block;
            padding-left: 0;
            margin: 20px 0;
            border-radius: 4px;
        }

        .pagination > li {
            display: inline;
        }

        .pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .pagination > li:first-child > a, .pagination > li:first-child > span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .pagination > li > a {
            background: #fafafa;
            color: #666;
        }

        .pagination-sm > li > a, .pagination-sm > li > span {
            padding: 5px 10px;
            font-size: 12px;
            line-height: 1.5;
        }

        .pagination > li > a, .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #337ab7;
            text-decoration: none;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        .blue {
            color: #1971a8;
            font-size: 14px;
        }

        .pagination .current a {
            background-color: rgba(10, 10, 10, 0.31) !important;
        }
    </style>
    <script>
        function exportImg(){
            let node = document.querySelector("svg");
            let name = "svg";
            let type = "png";
            let width = 800;
            let height = 800;
            let serializer = new XMLSerializer()
            let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node);
            console.log(source);
            let image = new Image()
            image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
            var url = '${base}' + "/admin/parameters/mainImgeUpload1?id=${(templateId?c)!}";
            $.ajax({//把编号带到后台去
                type : 'post',
                url : url,
                data:{imageData: encodeURIComponent(source)},
                success: function (msg) {
                    alert("upload success");
                },
                error: function (msg) {
                    //debugger;
                    alert("error");
                }
            });
            console.log(image.src)
            let canvas = document.createElement('canvas')
            canvas.width = width
            canvas.height = height
            let context = canvas.getContext('2d')
            context.fillStyle = '#fff'
            context.fillRect(0, 0, 10000, 10000)
            image.onload = function () {
                context.drawImage(image, 0, 0)
                let a = document.createElement('a')
                a.download = name+"."+type;
                a.href = canvas.toDataURL("image/"+type)
                a.click()
            }
        }

    </script>
</head>
<body style="overflow-x: scroll">
<file>
<div class="canvas-box">
    <div class="hd">
        <div class="left">
            <h3>Build parameter</h3>
        </div>
        <div style="display: flex;">
            <div id="size_title" class="controls_title">Size: 0</div>
            <div id="size_slider" class="controls_slider"></div>
            <div id="angle_title" class="controls_title">Angle: 0</div>
            <div id="angle_slider" class="controls_slider"></div>
        </div>
        <div class="btns g-button-wrap">
            <button class="undo-button  " onclick="gotoBack();"  type="button">Back</button>
            <button class="undo-button border "  name="undo" id="undo_button" type="button">undo</button>
            <button class="undo-button " type="button" name="removeObject" id="removeObject">Remove</button>
            <button class="undo-button " type="button" name="bringToBack" id="bringToBack">ToBottom</button>
            <button class="save-button border "  name="save_button" id="save_button" type="button">Save</button>
            <button class="save-button border "  name="export_button" id="export_button" type="button" onclick="exportImg();">export</button>
        </div>
    </div>
    <div class="bd ">
        <div class="product-sidebar">
            <div class="collapse">
                <#list icons?keys as key>
                <div class="colla-item">
                    <div class="colla-tit ">
                        <h3>${key!}</h3>
                    </div>
                    <div class="colla-content ">
                        <ul>
                            <#list icons[key] as icon>
                            <li class="iconTarget" id="${icon.id!}" svgPhoto="${base}${icon.photo!}" svgCatagory="${key!}">
                                <a href="javascript:void(0);">
                                    <div class="img">
                                        <img src="${base}${icon.icon!}" x="" alt="">
                                    </div>
                                    <div class="txt">
                                        <p>${icon.name!}</p>
                                    </div>
                                </a>
                            </li>
                            </#list>
                        </ul>
                    </div>
                </div>
                </#list>
                <div class="colla-item">
                    <div class="colla-tit ">
                        <h3>Line</h3>
                    </div>
                    <div class="colla-content ">
                        <div style="float: left">
                            <embed src="./svg/lines.svg" style="display:block;width:70px;height:70px"/>
                            <input type="checkbox" id="line" class="line">
                        </div>
                        <div style="float: left;">
                            <embed src="./svg/arrows.svg" style="display:block;width:70px;height:70px"/>
                            <input type="checkbox" id="arrow" class="line">
                        </div>
                    </div>
                </div>
        </div>
    </div>
    <div class="component-content">
        <div id="svgcontainer"></div>
    </div>
    <div class="parameter-slidebar" id="parameterInfo">
    </div>
</div>
</div>
<!-- 遮罩层 -->
<div class="shade"></div>
<script src="${base}/static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/uploadimg.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/scrollBar.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/static/js/script.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/node_modules/jquery-maxlength/jquery.plugin.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/node_modules/jquery-maxlength/jquery.maxlength.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/node_modules/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/bower_components/jquery-ui/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/svg/jquery.svg.js" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/utils.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/page.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/service.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/oldc.classes.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/oldc-events.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/oldc-v3.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script src="${base}/svg/newscript/oldc.history.js?vno=8" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var gotoBack = function(){
        if ('${option!}' == 'edit') {
            document.location.href='${base}/admin/parameters/summary_edit?id=${(templateId?c)!}';
        }else{
            history.go(-1);
        }
    }
    $(function () {
        $('.colla-item').each(function () {
            var _this = $(this);
            var item = _this.find('li');
            var content = _this.find(".colla-content");
            item.on("click", function () {
                $(this).addClass("active").siblings().removeClass('active');
            });
            item.on("dragend", function (evt) {
                let event = evt.originalEvent;
                let x = event.clientX;
                let y = event.clientY;
                if (x > 260 && y > 80) {
                    // {"catagory":"Backgrounds","id":16,"name":"Small Backdrop","photo":"/svg/icons/Small Backdrop.svg","valid":true}"
                    let photo = this.getAttribute("svgPhoto");
                    let catagory = this.getAttribute("svgCatagory");
                    let svgObject;
                    let that = this;
                    if (icons && icons[catagory]) {
                        for (let obj of icons[catagory]) {
                            if (obj.id == that.id) {
                                svgObject = obj;
                                break;
                            }
                        }
                    }
                    svgObject.realCoordinate = {x, y};
                    svgCanvas.removeIcons();
                    $(".svgText").remove();
                    svgCanvas.svg.load(photo, {
                        addTo: true,
                        svgObj: svgObject,
                        onLoad: svgCanvas.postNewLoad
                    });
                    //console.log(this.getAttribute("svgtarget"))

                }
            });
            if (item.length > 4) {
                content.addClass('scrollBox');
            }
            $(".scrollBox").scrollBar();
        });

    })
</script>
</body>

</html>
